﻿<div id="container" class="avalonia-container" tabindex="0" oncontextmenu="return false;"
     @onwheel="OnWheel"
     @onkeydown="OnKeyDown"
     @onkeyup="OnKeyUp"
     @onpointerdown="OnPointerDown"
     @onpointerup="OnPointerUp"
     @onpointermove="OnPointerMove"
     @onpointercancel="OnPointerCancel">
    
    <canvas id="htmlCanvas" @ref="_htmlCanvas" @attributes="AdditionalAttributes"/>

	<div id="nativeControlsContainer" @ref="_nativeControlsContainer" />

    <input id="inputElement" @ref="_inputElement" type="text" @oninput="OnInput" 
        onpaste="return false;"
        oncopy="return false;" 
        oncut="return false;"/>
</div>

<style>
#container{
    touch-action: none;
}
#htmlCanvas {
    opacity: 1;
    background-color: #ccc;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 500;
}

#nativeControlsContainer {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 700;
}

#inputElement {
    opacity: 0.0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

</style>
